<template>
  <div class="common-layout">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header class="header">
        <div class="header-content">
          <div class="logo">
            <img src="@/assets/images/logo.jpg" alt="Admin Logo" class="logo-img" />
            <span class="system-name">后台管理系统</span>
          </div>
          <div class="header-right">
            <el-tooltip content="消息通知" placement="bottom">
              <el-badge :value="12" class="notification-badge">
                <el-icon :size="20">
                  <Bell />
                </el-icon>
              </el-badge>
            </el-tooltip>
            <el-dropdown>
              <div class="user-info">
                <el-avatar :size="32" src="@/assets/user-avatar.jpg" />
                <span class="user-name">管理员</span>
                <el-icon class="arrow-down">
                  <ArrowDown />
                </el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>个人中心</el-dropdown-item>
                  <el-dropdown-item>系统设置</el-dropdown-item>
                  <el-dropdown-item @click="goUserHome()" divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>

      <el-container>
        <!-- 侧边栏菜单 -->
        <el-aside width="220px" class="sidebar">
          <el-menu router :default-active="activeUrl" active-text-color="#409EFF" background-color="#304156"
            text-color="#bfcbd9" class="el-menu-vertical">
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <Goods />
                </el-icon>
                <span>商品管理</span>
              </template>
              <el-menu-item index="/admin/goods/list">
                <template #title>商品列表</template>
              </el-menu-item>
              <el-menu-item index="/admin/goods/publish">
                <template #title>上架审核</template>
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <Tickets />
                </el-icon>
                <span>订单管理</span>
              </template>
              <el-menu-item index="/admin/order/list">
                <template #title>订单列表</template>
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="4">
              <template #title>
                <el-icon>
                  <User />
                </el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/admin/users/account">
                <template #title>用户列表</template>
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <Shop />
                </el-icon>
                <span>商家管理</span>
              </template>
              <el-menu-item index="/admin/seller/register">
                <template #title>注册审核</template>
              </el-menu-item>
              <el-menu-item index="/admin/seller/account">
                <template #title>账户信息</template>
              </el-menu-item>
              <el-menu-item index="/admin/seller/publish">
                <template #title>发布产品</template>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>

        <!-- 主内容区 -->
        <el-main class="main-content">
          <transition name="fade">
            <router-view />
          </transition>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { changeLayout, LayoutType } from '@/utils/changeLayout'
const router = useRouter()

import {
  Bell,
  ArrowDown,
  Goods,
  Tickets,
  User,
} from '@element-plus/icons-vue'




const activeUrl = ref(router.currentRoute.value.path)

router.afterEach((to) => {
  activeUrl.value = to.path
})

const goUserHome = () => {
  router.push("/")
  changeLayout(LayoutType.BASIC)
}
</script>

<style scoped>
.header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  height: 60px;
  display: flex;
  align-items: center;
  /* 修改头部背景颜色，使其与侧边栏更协调 */
  background: linear-gradient(135deg, #2D3748 0%, #3A4556 100%);
}

.sidebar {
  /* 修改侧边栏背景颜色，使其与头部更协调 */
  background: linear-gradient(180deg, #2D3748 0%, #3A4556 100%);
  height: calc(100vh - 60px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.header-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-img {
  height: 36px;
}

.system-name {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.user-name {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.arrow-down {
  color: rgba(255, 255, 255, 0.7);
  margin-left: 4px;
}

.el-menu-vertical {
  border-right: none;
  --el-menu-bg-color: transparent;
  --el-menu-text-color: rgba(255, 255, 255, 0.9);
  --el-menu-active-color: #4A90E2;
  --el-menu-hover-bg-color: rgba(255, 255, 255, 0.05);
}

.main-content {
  background-color: #F8FAFC;
  height: calc(100vh - 60px);
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.main-content>* {
  flex: 1;
  min-height: min-content;
}

.notification-badge {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.9);
}

.el-menu-item.is-active {
  background: rgba(74, 144, 226, 0.1) !important;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>